<template>
  <div style="margin-top: 40px">
    <a-form-item label="就诊建议" name="description">
      <a-textarea
        v-model:value="recordData.suggestion"
        placeholder="请输入就诊建议！"
        :rows="3"
      />
    </a-form-item>

    <a-row>
      <a-col :span="6"></a-col>
      <a-col :span="6">
        <div class="btn_box"><a-button @click="backStep">返回</a-button></div>
      </a-col>
      <a-col :span="6">
        <div class="btn_box">
          <a-button
            @click="submitData"
            style="margin-right: 20px; background-color: #b83b5e"
            type="primary"
            >提交</a-button
          >
        </div></a-col
      >
      <a-col :span="6"></a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { userConsuliation } from '@/stores/ConsulitationStore'

const stepsStore = userConsuliation()
const emit = defineEmits(['handData'])
const recordData = ref({
  suggestion: '',
})

const backStep = () => {
  stepsStore.current--
}

watch(
  stepsStore.getCurrent,
  () => {
    // 只要步骤为4了表示完成了然后清空本页数据
    if (stepsStore.getCurrent() == 4) {
      recordData.value = {
        suggestion: '',
      }
    }
  },
  {
    deep: true,
    immediate: true,
  }
)
//提交数据
const submitData = async () => {
  await stepsStore.addSuggestion(recordData.value.suggestion)
  await emit('handData')
}
</script>

<style lang="less" scoped>
.btn_box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
</style>
